<template>
  <!-- 搜索工作栏 -->
  <ContentWrap>
    <el-form ref="queryFormRef" :inline="true" :model="paramsData" class="-mb-15px" label-width="68px">
      <el-form-item label="考勤月份" prop="date">
        <el-date-picker
          v-model="paramsData.date"
          @change="monthChange"
          class="!w-300px"
          type="month"
          :disabled-date="disabledDateMethod"
          placeholder="请选择月份"
        />
      </el-form-item>
      <el-form-item label="员工姓名" prop="name">
        <el-input v-model="paramsData.name" class="!w-300px" clearable placeholder="姓名" @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="paramsData.phone" class="!w-300px" clearable placeholder="请输入手机号"
          @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button v-hasPermi="['wise:employee:query']" @click="handleQuery">
          <Icon class="mr-5px" icon="ep:search" />
          搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon class="mr-5px" icon="ep:refresh" />
          重置
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>


    <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="tableData" border>
      <template v-for="item in tableColumn" :key="item.prop" >
        <el-table-column
          :width="item.width"
          :align="item.align ? item.align : 'center'" 
          :label="item.label"
          :prop="item.prop"
          :fixed="item.fixed"
        >
          <template #default="scope">
            <div v-if="item.prop === 'departmentId'">{{ scope.row.departmentId ? findDeptNameById(deptTree, scope.row.departmentId) : '-' }}</div>
            <div v-else-if="item.prop == 'createTime'">
              <p>创建时间：{{ scope.row.createTime ? formatDate(scope.row.createTime) : '-' }}</p>
              <p>更新时间：{{ scope.row.updateTime ? formatDate(scope.row.updateTime) : '-' }}</p>
            </div>
            <div v-else-if="item.prop == 'creator'">
              <p>创建：{{ scope.row.creator ? scope.row.creator : '-' }}</p>
              <p>更新：{{ scope.row.updater ? scope.row.updater : '-' }}</p>
            </div>
            <div v-else>
              <div v-if="getMonthDay.includes(item.prop)">
                <span v-if="scope.row[item.prop]"><el-icon><Select /></el-icon></span>
                <span v-else></span>
              </div>
              <span v-else>{{ scope.row[item.prop] || '-' }}</span>
            </div>
          </template>
        </el-table-column>
      </template>

    </el-table>
  </ContentWrap>
</template>
<script setup>
  import {ref,reactive} from "vue"
  import { Select } from '@element-plus/icons-vue'
  const paramsData = reactive({
    name: '',
    phone: '',
    date: '',
  })
  const loading = ref(false) // 列表的加载中
  const getMonthDay = ref([])
  const tableData = ref([
    {id: 1, name: '张三1', phone: 13800000001, jobType: '电工/泥工'},
    {id: 2, name: '张三2', phone: 13800000002, jobType: '电工/泥工'},
    {id: 3, name: '张三3', phone: 13800000003, jobType: '电工/泥工'},
    {id: 4, name: '张三4', phone: 13800000004, jobType: '电工/泥工'},
    {id: 5, name: '张三5', phone: 13800000005, jobType: '电工/泥工'},
    {id: 6, name: '张三6', phone: 13800000006, jobType: '电工/泥工'},
    {id: 7, name: '张三7', phone: 13800000007, jobType: '电工/泥工'},
    {id: 8, name: '张三8', phone: 13800000008, jobType: '电工/泥工'},
  ]) // 列表的数据
  const tableColumn = ref([
    { prop: 'name', label: '姓名', align: 'center'},
    { prop: 'phone', label: '联系电话', align: 'center', width: 120},
    { prop: 'jobType', label: '工种', align: 'center', width: 100},
  ]) // 表格的列
  const copyColumn = ref([
    { prop: 'name', label: '姓名', align: 'center'},
    { prop: 'phone', label: '联系电话', align: 'center', width: 120},
    { prop: 'jobType', label: '工种', align: 'center', width: 100},
  ])
  const queryFormRef = ref() // 搜索的表单

  /** 搜索按钮操作 */
  const handleQuery = () => {
    console.log(paramsData);
    
    
  }
  const resetQuery = () => {
    queryFormRef.value.resetFields()
  }

  function monthChange(e) {
    paramsData.date = formatMonth(e)
    if(!e) return
    getMonthDaysArr(paramsData.date)
  }
  function formatMonth(date) {
    if (isNaN(date.getTime())) return ''
    const yyyy = date.getFullYear()
    const mm = String(date.getMonth() + 1).padStart(2, '0')
    return `${yyyy}-${mm}`
  }
  // 根据月份设置表格列数据
  function getMonthDaysArr(monthStr) {
    const [year, month] = monthStr.split('-').map(Number)
    const days = new Date(year, month, 0).getDate()
    let monthList = Array.from({ length: days }, (_, i) => i + 1)
    getMonthDay.value = monthList.map(item => {return item + ''})
    monthList = monthList.map(item => {return item + ''})

    monthList = monthList.map((item, index) => {
      if(index === monthList.length - 1){
        return {
          prop: item,
          label: item,
          align: 'center',
          width: 50,
          fixed: 'right'
        }
      }else{
        return {
          prop: item,
          label: item,
          align: 'center',
          width: 50,
        }
      }
    })
    tableColumn.value = copyColumn.value.concat(monthList)

    let tableMonthData = tableData.value.map(item => {
      let obj = {}
      obj = {...item}
      getMonthDay.value.forEach(day => {
        if(day % 2 === 0){
          obj[day] = 0
        }else{
          obj[day] = 1
        }
      })
      return obj
    })
    tableData.value = tableMonthData
  }
  function getCurrentYearMonth() {
    const now = new Date()
    const yyyy = now.getFullYear()
    const mm = String(now.getMonth() + 1).padStart(2, '0')
    return `${yyyy}-${mm}`
  }
  function disabledDateMethod(time) {
    return time.getTime() > Date.now()
  }
  onMounted(() => {
    paramsData.date = getCurrentYearMonth()
    getMonthDaysArr(paramsData.date)
  })
</script>
<style lang="scss" scoped>

</style>
